<template>
   <el-dialog v-model="dialog.show" :title="dialog.title" width="70%">
      <el-form :model="formData" label-width="100px">
         <el-row>
            <el-col :span="12">
               <el-form-item label="订单编号">
                  <el-input v-model="formData.orderCode" disabled></el-input>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="下单时间">
                  <el-input v-model="formData.orderDate" disabled></el-input>
               </el-form-item>
            </el-col>
         </el-row>
         <el-row>
            <el-col :span="12">
               <el-form-item label="订单总金额">
                  <el-input v-model="formData.totalMoney" disabled></el-input>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="收货人">
                  <el-input v-model="formData.receiveUser" disabled></el-input>
               </el-form-item>
            </el-col>
         </el-row>
         <el-row>
            <el-col :span="12">
               <el-form-item label="收货电话">
                  <el-input v-model="formData.receivePhone" disabled></el-input>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="收货地址">
                  <el-input v-model="formData.receiveAddress" disabled></el-input>
               </el-form-item>
            </el-col>
         </el-row>
         <el-row>
            <el-col :span="12">
               <el-form-item label="是否付款">
                  <el-input v-model="formData.isPay" disabled></el-input>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="付款时间">
                  <el-input v-model="formData.payDate" disabled></el-input>
               </el-form-item>
            </el-col>
         </el-row>
         <el-row>
            <el-col :span="12">
               <el-form-item label="是否发货">
                  <el-input v-model="formData.isSend" disabled></el-input>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="发货时间">
                  <el-input v-model="formData.sendDate" disabled></el-input>
               </el-form-item>
            </el-col>
         </el-row>
         <el-row>
            <el-col :span="12">
               <el-form-item label="物流单号">
                  <el-input v-model="formData.sendNo" disabled></el-input>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="是否收货">
                  <el-input v-model="formData.isReceive" disabled></el-input>
               </el-form-item>
            </el-col>
         </el-row>
         <el-row>
            <el-col :span="24">
               <el-form-item label="订单明细">
                  <el-table :data="detailList" border>
                     <el-table-column type="index" label="序号" width="60"></el-table-column>
                     <el-table-column prop="bookCode" label="图书编号"></el-table-column>
                     <el-table-column prop="bookName" label="图书名称"></el-table-column>
                     <el-table-column prop="buyPrice" label="购买单价"></el-table-column>
                     <el-table-column prop="buyQty" label="购买数量"></el-table-column>
                     <el-table-column label="小计">
                        <template #default="scope">
                           {{ (scope.row.buyPrice * scope.row.buyQty).toFixed(2) }}
                        </template>
                     </el-table-column>
                  </el-table>
               </el-form-item>
            </el-col>
         </el-row>
      </el-form>
      <template #footer>
         <el-button @click="dialog.show = false">关闭</el-button>
      </template>
   </el-dialog>
</template>
<script>
import axiosUtil from "@/utils/axiosUtil";

export default {
   data() {
      return {
         dialog: {
            show: false,
            title: '订单详情'
         },
         formData: {
            orderCode: '',
            orderDate: '',
            totalMoney: '',
            receiveUser: '',
            receivePhone: '',
            receiveAddress: '',
            isPay: '',
            payDate: '',
            isSend: '',
            sendDate: '',
            sendNo: '',
            isReceive: '',
         },
         detailList: []
      }
   },
   methods: {
      //显示对话框
      mShowDialog(row) {
         this.dialog.show = true;
         this.formData.orderCode = row.orderCode;
         this.mGetData();
      },
      //获取订单详情数据
      mGetData() {
         axiosUtil.get({
            url: '/orderInfo/getDetail',
            data: {
               orderCode: this.formData.orderCode
            },
            success: res => {
               // 填充订单信息
               Object.keys(this.formData).forEach((key) => {
                  this.formData[key] = res.data.orderInfo[key];
               })
               // 填充订单明细
               this.detailList = res.data.detailList;
            }
         })
      }
   }
}
</script>
<style>
</style>
